*{
	padding:0;
	margin:0;
	font-family:'Open Sans Light';
	letter-spacing: .05em;
}

html{
	height:100%;
}

body{
	height:100%;
	/*background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);*/
	background:url(../img/background.jpg) no-repeat;
	background-size:cover;
}

.container{
	height:100%;
	
}

.login-wrapper{
	width:250px;
	/*background-color:#fff;*/
	background:#fff;
	height:500px;
	position:relative;
	padding:0 50px;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	opacity:0.9;
	border-radius:10px;
	transition: box-shadow .30s;
}

.login-wrapper:hover{
	box-shadow: #fff 5px 5px 25px;
}

.login-wrapper .header{
	font-size:30px;
	font-weight:bold;
	text-align:center;
	line-height:200px;
}

.login-wrapper .form-wrapper .input-item{
	display:block;
	width:100%;
	margin-bottom:20px;
	border:0;
	padding:10px;
	border-bottom:1px solid rgb(128,125,125);
	font-size:15px;
	outline:none;
}

.login-wrapper .form-wrapper .input-item::placeholder{
	text-transform:uppercase;
}

.login-wrapper .form-wrapper .btn{
	text-align:center;
	text-transform:uppercase;
	padding:10px;
	width:100%;
	margin-top:40px;
	/*background-image:linear-gradient(to right,#a6c1ee,#fbc2eb);*/
	background:linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
	background-size:400%;
	color:#fff;
	font-weight:bold;
	font-size:20px;
	border:none;
	border-radius:25px;
	outline:none;
	text-decoration: none;
}

.login-wrapper .btn:hover{
	animation: sun 8s infinite;
}
@keyframes sun{
	100%{
		background-position:-400% 0;
	}
}

.login-wrapper .msg{
	text-align:center;
	line-height:80px;
}

.login-wrapper .msg a{
	text-decoration: none;
	font-weight:bold;
	color:#a6c1ee;
}

button{
    position: absolute;
    height: 40px;
    width: 270px;
    margin: 0px 0px;
    border-radius: 40px;
    border: none;
    outline: none;
    /*background: #111;*/
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    color: #fff;
    font-size: 20px;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer
}

button:hover{
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
}


button:before{
    content: '';
    position: absolute;
    background: inherit;
    top: -1px;
    right:-1px;
    bottom: -1px;
    left: -1px;
    border-radius: 40px;
    filter: blur(10px);
    opacity: 0;
    transition: opacity 0.5s;
}

button:hover:before{
    opacity: 1;
    z-index: -1;
}

button:hover{
    z-index: 1;
    animation: glow 8s linear infinite;
}

@keyframes glow {
    100%{
        background-position: -400% 0;
    }
}